<script setup lang="ts">
import { computed, inject, reactive } from "vue";
import {login} from "@/api";
import {message} from "ant-design-vue";

interface FormState{
  accountNumber:string,
  password:string
}
const formState = reactive<FormState>({
  accountNumber:'',password:''
})
defineProps({
  visible: {
    type: Boolean,
    required: true,
  }
});
const emits = defineEmits(["update:visible","loginSuccess"]);
const disabled=computed(()=>{
  return !(formState.accountNumber&&formState.password)
})
const cancel = () => {
  emits('update:visible',false)
}
const onFinish = (values:any) => {
  console.log("onFinish",values)
  login(values).then(res=>{
    const data=res.data
    if (data.code==200){
      localStorage.setItem("userInfo",JSON.stringify(data.data))
      message.warning("登录成功")
      emits('update:visible',false);
      emits('loginSuccess');
    }else {
      message.warning(data.message)
    }
  })

}
</script>
<template>
  <a-modal :visible="visible" :footer="null" centered :width="500" @cancel="cancel">
    <a-form :model="formState" @finish="onFinish" style="margin-top: 80px;">
      <a-form-item label="账号" name="accountNumber" :rules="[{required: true,message:'请输入账号'}]">
        <a-input v-model:value="formState.accountNumber">
          <template #prefix>
            <i class="iconfont icon-customer-service"></i>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="密码" name="password" :rules="[{required:true,message: '请输入密码'}]">
        <a-input-password v-model:value="formState.password">
          <template #prefix>
            <i class="iconfont icon-customer-service"></i>
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-button :disabled="disabled" type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style scoped lang="less">
/deep/ .ant-modal-close {
  display: none !important;
}

/deep/ .ant-modal-body {
  height: 740px;
}
</style>
